<template>
  <div class="inventory-execution-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">
          <el-icon><Operation /></el-icon>
          盘点执行
        </h2>
        <p class="page-description">执行库存盘点操作，支持扫码盘点、数量录入和差异处理</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="handleStartExecution" :disabled="!selectedPlan">
          <el-icon><VideoPlay /></el-icon>
          开始盘点
        </el-button>
        <el-button @click="handleScanMode" :type="scanMode ? 'success' : 'default'">
          <el-icon><Camera /></el-icon>
          {{ scanMode ? '扫码模式' : '手动模式' }}
        </el-button>
        <el-button @click="handleMobileView">
          <el-icon><Iphone /></el-icon>
          移动端视图
        </el-button>
      </div>
    </div>

    <!-- 执行状态栏 -->
    <div class="execution-status" v-if="currentExecution">
      <el-card shadow="never" class="status-card">
        <div class="status-content">
          <div class="plan-info">
            <h3>{{ currentExecution.planName }}</h3>
            <p>{{ currentExecution.warehouseName }} | {{ currentExecution.assignedUser }}</p>
          </div>
          <div class="progress-info">
            <div class="progress-stats">
              <div class="stat-item">
                <span class="stat-value">{{ currentExecution.completedItems }}</span>
                <span class="stat-label">已盘点</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ currentExecution.totalItems }}</span>
                <span class="stat-label">总数量</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ currentExecution.discrepancies }}</span>
                <span class="stat-label">差异数</span>
              </div>
            </div>
            <el-progress
              :percentage="executionProgress"
              :stroke-width="8"
              :show-text="true"
              class="execution-progress"
            />
          </div>
          <div class="action-buttons">
            <el-button type="warning" @click="handlePauseExecution" v-if="executionStatus === 'running'">
              <el-icon><VideoPause /></el-icon>
              暂停
            </el-button>
            <el-button type="success" @click="handleResumeExecution" v-if="executionStatus === 'paused'">
              <el-icon><VideoPlay /></el-icon>
              继续
            </el-button>
            <el-button type="primary" @click="handleCompleteExecution">
              <el-icon><CircleCheck /></el-icon>
              完成盘点
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 盘点计划选择 -->
    <div class="plan-selection" v-if="!currentExecution">
      <el-card shadow="never">
        <div class="selection-header">
          <h3>选择盘点计划</h3>
          <el-button @click="loadPlans">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
        <el-table
          :data="availablePlans"
          @current-change="handlePlanSelect"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column prop="planCode" label="计划编号" width="140" />
          <el-table-column prop="planName" label="计划名称" min-width="200" />
          <el-table-column prop="warehouseName" label="仓库" width="120" />
          <el-table-column prop="planStartDate" label="开始时间" width="110" />
          <el-table-column prop="planEndDate" label="结束时间" width="110" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)">{{ getStatusText(row.status) }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 扫码盘点区域 -->
    <div class="scan-section" v-if="currentExecution && scanMode">
      <el-card shadow="never">
        <div class="scan-header">
          <h3>扫码盘点</h3>
          <div class="scan-controls">
            <el-button @click="handleManualInput">
              <el-icon><Edit /></el-icon>
              手动输入
            </el-button>
            <el-button @click="handleCameraToggle">
              <el-icon><Camera /></el-icon>
              {{ cameraActive ? '关闭相机' : '打开相机' }}
            </el-button>
          </div>
        </div>
        
        <div class="scan-area">
          <div class="camera-container" v-if="cameraActive">
            <div class="camera-placeholder">
              <el-icon size="48"><Camera /></el-icon>
              <p>相机扫描区域</p>
              <p class="scan-tip">将条码对准扫描框</p>
            </div>
          </div>
          
          <div class="manual-input" v-else>
            <el-input
              v-model="barcodeInput"
              placeholder="请扫描或输入商品条码"
              size="large"
              @keyup.enter="handleBarcodeSubmit"
              ref="barcodeInputRef"
            >
              <template #append>
                <el-button @click="handleBarcodeSubmit">
                  <el-icon><Search /></el-icon>
                </el-button>
              </template>
            </el-input>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 盘点商品列表 -->
    <div class="inventory-list" v-if="currentExecution">
      <el-card shadow="never">
        <div class="list-header">
          <div class="header-left">
            <h3>盘点商品列表</h3>
            <el-tag>{{ filteredItems.length }} 个商品</el-tag>
          </div>
          <div class="header-actions">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索商品名称或编码"
              style="width: 200px"
              clearable
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-select v-model="statusFilter" placeholder="状态筛选" style="width: 120px">
              <el-option label="全部" value="" />
              <el-option label="未盘点" value="pending" />
              <el-option label="已盘点" value="completed" />
              <el-option label="有差异" value="discrepancy" />
            </el-select>
          </div>
        </div>

        <div class="inventory-grid" v-if="isMobileView">
          <div
            v-for="item in filteredItems"
            :key="item.id"
            class="inventory-card"
            :class="{ 'completed': item.status === 'completed', 'discrepancy': item.hasDiscrepancy }"
          >
            <div class="card-header">
              <div class="product-info">
                <h4>{{ item.productName }}</h4>
                <p>{{ item.productCode }}</p>
              </div>
              <el-tag :type="getItemStatusType(item.status)">{{ getItemStatusText(item.status) }}</el-tag>
            </div>
            <div class="card-content">
              <div class="quantity-info">
                <div class="quantity-item">
                  <span class="label">账面数量:</span>
                  <span class="value">{{ item.bookQuantity }}</span>
                </div>
                <div class="quantity-item">
                  <span class="label">实盘数量:</span>
                  <el-input-number
                    v-model="item.actualQuantity"
                    :min="0"
                    size="small"
                    @change="handleQuantityChange(item)"
                  />
                </div>
                <div class="quantity-item" v-if="item.hasDiscrepancy">
                  <span class="label">差异:</span>
                  <span class="value discrepancy-value">{{ item.discrepancy }}</span>
                </div>
              </div>
              <div class="card-actions">
                <el-button size="small" type="primary" @click="handleItemComplete(item)" v-if="item.status !== 'completed'">
                  确认盘点
                </el-button>
                <el-button size="small" @click="handleItemEdit(item)" v-if="item.status === 'completed'">
                  重新盘点
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <el-table
          v-else
          :data="filteredItems"
          stripe
          border
          style="width: 100%"
          :row-class-name="getRowClassName"
        >
          <el-table-column prop="productCode" label="商品编码" width="120" />
          <el-table-column prop="productName" label="商品名称" min-width="200" show-overflow-tooltip />
          <el-table-column prop="category" label="分类" width="100" />
          <el-table-column prop="unit" label="单位" width="80" />
          <el-table-column prop="bookQuantity" label="账面数量" width="100" align="right" />
          <el-table-column label="实盘数量" width="120">
            <template #default="{ row }">
              <el-input-number
                v-model="row.actualQuantity"
                :min="0"
                size="small"
                @change="handleQuantityChange(row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="差异" width="100" align="right">
            <template #default="{ row }">
              <span :class="{ 'discrepancy-positive': row.discrepancy > 0, 'discrepancy-negative': row.discrepancy < 0 }">
                {{ row.discrepancy || 0 }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getItemStatusType(row.status)">{{ getItemStatusText(row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="handleItemComplete(row)" v-if="row.status !== 'completed'">
                确认
              </el-button>
              <el-button size="small" @click="handleItemEdit(row)" v-if="row.status === 'completed'">
                重新盘点
              </el-button>
              <el-button size="small" type="warning" @click="handleItemNote(row)">
                备注
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 差异处理对话框 -->
    <el-dialog
      v-model="discrepancyDialogVisible"
      title="差异处理"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="discrepancy-content" v-if="currentDiscrepancyItem">
        <div class="product-summary">
          <h4>{{ currentDiscrepancyItem.productName }}</h4>
          <p>商品编码: {{ currentDiscrepancyItem.productCode }}</p>
        </div>
        
        <div class="quantity-comparison">
          <div class="comparison-item">
            <span class="label">账面数量:</span>
            <span class="value">{{ currentDiscrepancyItem.bookQuantity }}</span>
          </div>
          <div class="comparison-item">
            <span class="label">实盘数量:</span>
            <span class="value">{{ currentDiscrepancyItem.actualQuantity }}</span>
          </div>
          <div class="comparison-item">
            <span class="label">差异数量:</span>
            <span class="value discrepancy-value">{{ currentDiscrepancyItem.discrepancy }}</span>
          </div>
        </div>

        <el-form :model="discrepancyForm" label-width="100px">
          <el-form-item label="差异原因">
            <el-select v-model="discrepancyForm.reason" placeholder="请选择差异原因" style="width: 100%">
              <el-option label="盘点错误" value="count_error" />
              <el-option label="系统错误" value="system_error" />
              <el-option label="货物损耗" value="loss" />
              <el-option label="货物丢失" value="missing" />
              <el-option label="未及时入库" value="not_inbound" />
              <el-option label="其他原因" value="other" />
            </el-select>
          </el-form-item>
          <el-form-item label="处理方式">
            <el-radio-group v-model="discrepancyForm.action">
              <el-radio label="adjust">库存调整</el-radio>
              <el-radio label="recount">重新盘点</el-radio>
              <el-radio label="ignore">忽略差异</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注说明">
            <el-input
              v-model="discrepancyForm.note"
              type="textarea"
              :rows="3"
              placeholder="请输入备注说明"
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="discrepancyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDiscrepancySubmit">
            确定处理
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 备注对话框 -->
    <el-dialog
      v-model="noteDialogVisible"
      title="添加备注"
      width="500px"
    >
      <el-input
        v-model="noteContent"
        type="textarea"
        :rows="4"
        placeholder="请输入备注内容"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="noteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleNoteSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Operation,
  VideoPlay,
  VideoPause,
  Camera,
  Iphone,
  CircleCheck,
  Refresh,
  Edit,
  Search
} from '@element-plus/icons-vue'

// 响应式数据
const loading = ref(false)
const scanMode = ref(false)
const cameraActive = ref(false)
const isMobileView = ref(false)
const selectedPlan = ref(null)
const currentExecution = ref(null)
const executionStatus = ref('stopped') // stopped, running, paused, completed
const barcodeInput = ref('')
const barcodeInputRef = ref(null)
const searchKeyword = ref('')
const statusFilter = ref('')
const discrepancyDialogVisible = ref(false)
const noteDialogVisible = ref(false)
const currentDiscrepancyItem = ref(null)
const currentNoteItem = ref(null)
const noteContent = ref('')

// 可用计划列表
const availablePlans = ref([])

// 盘点商品列表
const inventoryItems = ref([])

// 差异处理表单
const discrepancyForm = reactive({
  reason: '',
  action: 'adjust',
  note: ''
})

// 计算属性
const executionProgress = computed(() => {
  if (!currentExecution.value) return 0
  return Math.round((currentExecution.value.completedItems / currentExecution.value.totalItems) * 100)
})

const filteredItems = computed(() => {
  let items = inventoryItems.value
  
  // 关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    items = items.filter(item => 
      item.productName.toLowerCase().includes(keyword) ||
      item.productCode.toLowerCase().includes(keyword)
    )
  }
  
  // 状态筛选
  if (statusFilter.value) {
    if (statusFilter.value === 'discrepancy') {
      items = items.filter(item => item.hasDiscrepancy)
    } else {
      items = items.filter(item => item.status === statusFilter.value)
    }
  }
  
  return items
})

// 方法
const getStatusText = (status) => {
  const statusMap = {
    pending: '待开始',
    in_progress: '进行中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

const getStatusTagType = (status) => {
  const typeMap = {
    pending: 'warning',
    in_progress: 'primary',
    completed: 'success',
    cancelled: 'danger'
  }
  return typeMap[status] || 'info'
}

const getItemStatusText = (status) => {
  const statusMap = {
    pending: '未盘点',
    completed: '已盘点',
    discrepancy: '有差异'
  }
  return statusMap[status] || status
}

const getItemStatusType = (status) => {
  const typeMap = {
    pending: 'warning',
    completed: 'success',
    discrepancy: 'danger'
  }
  return typeMap[status] || 'info'
}

const getRowClassName = ({ row }) => {
  if (row.hasDiscrepancy) return 'discrepancy-row'
  if (row.status === 'completed') return 'completed-row'
  return ''
}

const loadPlans = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    availablePlans.value = [
      {
        id: 1,
        planCode: 'PD202401001',
        planName: '2024年第一季度全盘',
        warehouseName: '主仓库',
        planStartDate: '2024-01-15',
        planEndDate: '2024-01-20',
        status: 'in_progress'
      },
      {
        id: 2,
        planCode: 'PD202401002',
        planName: '电子产品类抽盘',
        warehouseName: '分仓库A',
        planStartDate: '2024-01-25',
        planEndDate: '2024-01-26',
        status: 'pending'
      }
    ]
  } catch (error) {
    ElMessage.error('加载计划失败')
  } finally {
    loading.value = false
  }
}

const handlePlanSelect = (plan) => {
  selectedPlan.value = plan
}

const handleStartExecution = async () => {
  if (!selectedPlan.value) {
    ElMessage.warning('请先选择盘点计划')
    return
  }
  
  try {
    // 模拟开始执行
    currentExecution.value = {
      ...selectedPlan.value,
      completedItems: 0,
      totalItems: 150,
      discrepancies: 0,
      assignedUser: '张三'
    }
    
    executionStatus.value = 'running'
    
    // 加载盘点商品列表
    await loadInventoryItems()
    
    ElMessage.success('盘点执行已开始')
  } catch (error) {
    ElMessage.error('开始执行失败')
  }
}

const loadInventoryItems = async () => {
  try {
    // 模拟加载商品数据
    const mockItems = [
      {
        id: 1,
        productCode: 'P001',
        productName: 'iPhone 15 Pro',
        category: '电子产品',
        unit: '台',
        bookQuantity: 50,
        actualQuantity: 48,
        status: 'pending',
        hasDiscrepancy: false,
        discrepancy: 0
      },
      {
        id: 2,
        productCode: 'P002',
        productName: 'MacBook Pro 16"',
        category: '电子产品',
        unit: '台',
        bookQuantity: 25,
        actualQuantity: 25,
        status: 'completed',
        hasDiscrepancy: false,
        discrepancy: 0
      },
      {
        id: 3,
        productCode: 'P003',
        productName: 'AirPods Pro',
        category: '电子产品',
        unit: '个',
        bookQuantity: 100,
        actualQuantity: 95,
        status: 'completed',
        hasDiscrepancy: true,
        discrepancy: -5
      }
    ]
    
    inventoryItems.value = mockItems
  } catch (error) {
    ElMessage.error('加载商品数据失败')
  }
}

const handleQuantityChange = (item) => {
  const discrepancy = (item.actualQuantity || 0) - item.bookQuantity
  item.discrepancy = discrepancy
  item.hasDiscrepancy = discrepancy !== 0
  
  if (item.hasDiscrepancy && item.status === 'completed') {
    // 如果已完成的商品出现差异，需要重新处理
    item.status = 'pending'
  }
}

const handleItemComplete = (item) => {
  if (item.actualQuantity === null || item.actualQuantity === undefined) {
    ElMessage.warning('请先输入实盘数量')
    return
  }
  
  if (item.hasDiscrepancy) {
    // 有差异需要处理
    currentDiscrepancyItem.value = item
    discrepancyDialogVisible.value = true
  } else {
    // 无差异直接完成
    item.status = 'completed'
    updateExecutionProgress()
    ElMessage.success('盘点完成')
  }
}

const handleItemEdit = (item) => {
  item.status = 'pending'
  updateExecutionProgress()
}

const handleItemNote = (item) => {
  currentNoteItem.value = item
  noteContent.value = item.note || ''
  noteDialogVisible.value = true
}

const handleDiscrepancySubmit = () => {
  if (!discrepancyForm.reason) {
    ElMessage.warning('请选择差异原因')
    return
  }
  
  const item = currentDiscrepancyItem.value
  
  switch (discrepancyForm.action) {
    case 'adjust':
      item.status = 'completed'
      ElMessage.success('库存调整已记录，盘点完成')
      break
    case 'recount':
      item.actualQuantity = null
      item.hasDiscrepancy = false
      item.discrepancy = 0
      ElMessage.info('请重新盘点该商品')
      break
    case 'ignore':
      item.status = 'completed'
      ElMessage.info('差异已忽略，盘点完成')
      break
  }
  
  // 保存差异处理记录
  item.discrepancyRecord = {
    reason: discrepancyForm.reason,
    action: discrepancyForm.action,
    note: discrepancyForm.note,
    handleTime: new Date().toLocaleString()
  }
  
  updateExecutionProgress()
  discrepancyDialogVisible.value = false
  
  // 重置表单
  Object.assign(discrepancyForm, {
    reason: '',
    action: 'adjust',
    note: ''
  })
}

const handleNoteSubmit = () => {
  currentNoteItem.value.note = noteContent.value
  noteDialogVisible.value = false
  ElMessage.success('备注已保存')
}

const updateExecutionProgress = () => {
  if (!currentExecution.value) return
  
  const completedCount = inventoryItems.value.filter(item => item.status === 'completed').length
  const discrepancyCount = inventoryItems.value.filter(item => item.hasDiscrepancy && item.status === 'completed').length
  
  currentExecution.value.completedItems = completedCount
  currentExecution.value.discrepancies = discrepancyCount
}

const handleScanMode = () => {
  scanMode.value = !scanMode.value
  if (scanMode.value) {
    nextTick(() => {
      if (barcodeInputRef.value) {
        barcodeInputRef.value.focus()
      }
    })
  }
}

const handleMobileView = () => {
  isMobileView.value = !isMobileView.value
}

const handleCameraToggle = () => {
  cameraActive.value = !cameraActive.value
  if (cameraActive.value) {
    ElMessage.info('相机功能需要在实际环境中集成')
  }
}

const handleManualInput = () => {
  cameraActive.value = false
  nextTick(() => {
    if (barcodeInputRef.value) {
      barcodeInputRef.value.focus()
    }
  })
}

const handleBarcodeSubmit = () => {
  if (!barcodeInput.value.trim()) {
    ElMessage.warning('请输入条码')
    return
  }
  
  // 查找对应商品
  const item = inventoryItems.value.find(item => item.productCode === barcodeInput.value)
  
  if (item) {
    // 自动填充数量或增加数量
    if (item.actualQuantity === null || item.actualQuantity === undefined) {
      item.actualQuantity = 1
    } else {
      item.actualQuantity += 1
    }
    
    handleQuantityChange(item)
    ElMessage.success(`已扫描: ${item.productName}`)
  } else {
    ElMessage.warning('未找到对应商品')
  }
  
  barcodeInput.value = ''
}

const handlePauseExecution = () => {
  executionStatus.value = 'paused'
  ElMessage.info('盘点已暂停')
}

const handleResumeExecution = () => {
  executionStatus.value = 'running'
  ElMessage.success('盘点已继续')
}

const handleCompleteExecution = async () => {
  const pendingItems = inventoryItems.value.filter(item => item.status === 'pending')
  
  if (pendingItems.length > 0) {
    try {
      await ElMessageBox.confirm(
        `还有 ${pendingItems.length} 个商品未完成盘点，确认完成整个盘点任务？`,
        '确认完成',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
    } catch {
      return
    }
  }
  
  executionStatus.value = 'completed'
  ElMessage.success('盘点执行已完成')
}

// 生命周期
onMounted(() => {
  loadPlans()
})
</script>

<style scoped>
.inventory-execution-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left .page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.header-left .page-description {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.execution-status {
  margin-bottom: 20px;
}

.status-card {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.status-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.plan-info h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  color: #303133;
}

.plan-info p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.progress-info {
  flex: 1;
}

.progress-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.execution-progress {
  width: 100%;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.plan-selection,
.scan-section,
.inventory-list {
  margin-bottom: 20px;
}

.selection-header,
.scan-header,
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.selection-header h3,
.scan-header h3,
.list-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.scan-controls {
  display: flex;
  gap: 8px;
}

.scan-area {
  margin-top: 16px;
}

.camera-container {
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  background-color: #fafafa;
}

.camera-placeholder {
  color: #909399;
}

.camera-placeholder p {
  margin: 8px 0 0 0;
}

.scan-tip {
  font-size: 12px;
  color: #c0c4cc;
}

.manual-input {
  max-width: 400px;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.inventory-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 16px;
  background: white;
  transition: all 0.3s;
}

.inventory-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.inventory-card.completed {
  border-color: #67c23a;
  background-color: #f0f9ff;
}

.inventory-card.discrepancy {
  border-color: #f56c6c;
  background-color: #fef0f0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.product-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #303133;
}

.product-info p {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quantity-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quantity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quantity-item .label {
  font-size: 14px;
  color: #606266;
}

.quantity-item .value {
  font-weight: 600;
  color: #303133;
}

.discrepancy-value {
  color: #f56c6c !important;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.discrepancy-positive {
  color: #67c23a;
}

.discrepancy-negative {
  color: #f56c6c;
}

:deep(.completed-row) {
  background-color: #f0f9ff;
}

:deep(.discrepancy-row) {
  background-color: #fef0f0;
}

.discrepancy-content {
  padding: 20px 0;
}

.product-summary h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #303133;
}

.product-summary p {
  margin: 0;
  color: #909399;
}

.quantity-comparison {
  margin: 20px 0;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 6px;
}

.comparison-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.comparison-item:last-child {
  margin-bottom: 0;
}

.comparison-item .label {
  color: #606266;
}

.comparison-item .value {
  font-weight: 600;
  color: #303133;
}

.dialog-footer {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .inventory-execution-container {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .header-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  
  .status-content {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .progress-stats {
    justify-content: space-around;
  }
  
  .action-buttons {
    justify-content: center;
  }
  
  .list-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .header-actions {
    flex-direction: column;
  }
  
  .inventory-grid {
    grid-template-columns: 1fr;
  }
}
</style>